import React, { Component } from 'react';
import '../css/pubuliu.less';
import {observer} from "mobx-react";
import  Mobx from  '../mobx'
import  axios from  'axios'
@observer class Muban extends Component {
    constructor(props) {
        super(props)
        this.state={
            array:[],
            row1:[200],
            row2:[100],
            row3:[150],
            row4:[130],
            size:0,
            total:1
        }
        this.size=0;
        this.intervaling=''
    }
    componentDidMount(){
        Mobx.history= this.props.history
      /*  axios.get('http://www.niuduxiu.com/creativity/findBy.jhtml?cid=-1&type=0&aid=-1&pageNumber=1&pageSize=40&memberID=')
            .then((item)=>{
                this.setState({
                    array:item.data.cindex,
                    size:item.data.pageNumber,
                    total:item.data.totalPage
                },()=>{
                        this.loading()
                        this.interval()
                })
            })*/
        let array=[];
        for(let i=0;i<40;i++){
            array[i]=Math.random()*300
        }
        this.setState({
            array:array
        },()=>{
            this.loading()
        })
    }
    loading() {
        if(this.size<1000){
            if(this.size<this.state.array.length){
                if(this.add(this.state.row1)<this.add(this.state.row2)&&this.add(this.state.row1)<this.add(this.state.row3)&&this.add(this.state.row1)<this.add(this.state.row4)){
                    console.log(this.add(this.state.row1) , this.add(this.state.row2), this.add(this.state.row3), this.add(this.state.row4))
                    this.setState({
                        row1: this.state.row1.concat(this.state.array[this.size])
                    },()=>{this.size++
                        this.loading()
                    })
                }
               else if(this.add(this.state.row2)<this.add(this.state.row1)&&this.add(this.state.row2)<this.add(this.state.row3)&&this.add(this.state.row2)<this.add(this.state.row4)){
                    this.setState({
                        row2: this.state.row2.concat(this.state.array[this.size])
                    },()=>{
                        this.size++
                        this.loading()
                    })
                }
                else  if(this.add(this.state.row3)<this.add(this.state.row1)&&this.add(this.state.row3)<this.add(this.state.row2)&&this.add(this.state.row3)<this.add(this.state.row4)){
                    this.setState({
                        row3: this.state.row3.concat(this.state.array[this.size])
                    },()=>{
                        this.size++
                        this.loading()
                    })
                }
                else   if(this.add(this.state.row4)<this.add(this.state.row2)&&this.add(this.state.row4)<this.add(this.state.row3)&&this.add(this.state.row4)<this.add(this.state.row1)){
                    this.setState({
                        row4: this.state.row4.concat(this.state.array[this.size])
                    },()=>{
                        this.size++
                        this.loading()
                    })
                }
                /*if(this.refs.row1.offsetHeight<this.refs.row2.offsetHeight&&this.refs.row1.offsetHeight<this.refs.row3.offsetHeight&&this.refs.row1.offsetHeight<this.refs.row4.offsetHeight){
                    console.log('42---'+this.size)
                    this.setState({
                        row1:this.state.row1.concat(this.state.array[this.size])
                    },()=>{
                        console.log(this.state.row1)
                        this.size=this.size+1
                        setTimeout(()=>{
                            this.loading()
                        },100)
                    })
                }else if(this.refs.row2.offsetHeight<this.refs.row1.offsetHeight&&this.refs.row2.offsetHeight<this.refs.row3.offsetHeight&&this.refs.row2.offsetHeight<this.refs.row4.offsetHeight){
                    this.setState({
                        row2:this.state.row2.concat(this.state.array[this.size])
                    },()=>{
                        this.size=this.size+1
                        setTimeout(()=>{
                            this.loading()
                        },100)
                    })
                }else if(this.refs.row3.offsetHeight<this.refs.row1.offsetHeight&&this.refs.row3.offsetHeight<this.refs.row2.offsetHeight&&this.refs.row3.offsetHeight<this.refs.row4.offsetHeight){
                    this.setState({
                        row3:this.state.row3.concat(this.state.array[this.size])
                },()=>{
                        this.size=this.size+1
                        setTimeout(()=>{
                            this.loading()
                        },100)
                    })
                }else if(this.refs.row4.offsetHeight<this.refs.row1.offsetHeight&&this.refs.row4.offsetHeight<this.refs.row2.offsetHeight&&this.refs.row4.offsetHeight<this.refs.row3.offsetHeight){
                    this.setState({
                        row4:this.state.row4.concat(this.state.array[this.size])
                    },()=>{
                        this.size=this.size+1
                        setTimeout(()=>{
                            this.loading()
                        },100)
                    })
                }else{
                    console.log('80---'+this.size)
                    this.setState({
                        row1:this.state.row1.concat(this.state.array[this.size])
                    },()=>{
                        this.size=this.size+1
                        setTimeout(()=>{
                            this.loading()
                        },100)
                    })
                }*/
            }
        }
    }
    add(item){
        let sum=0;
        item.map((item)=>{
            sum+=item
        })
        return sum;
    }
    interval(){
      /*  if(this.state.size>=this.state.tota){
            return false;
        }
        this.intervaling=setInterval(()=>{
            if((document.documentElement.scrollTop||document.body.scrollTop)-document.body.scrollHeight>=-1000){
                clearInterval(this.intervaling)
               this.setState({
                   size:this.state.size+1
               },()=>{
                    this.addin()
               })
            }
        })*/
    }
    addin(){
        axios.get('http://www.niuduxiu.com/creativity/findBy.jhtml?cid=-1&type=0&aid=-1&pageNumber='+this.state.size+'&pageSize=40&memberID=')
            .then((item)=>{
                this.setState({
                    array:this.state.array.concat(item.data.cindex),
                    size:item.data.pageNumber,
                    total:item.data.totalPage
                },()=>{
                        this.loading()
                        this.interval()
                })
            })
    }
    render() {
        console.log(1)
        return (
            <div className="pubuliu">
                <div className='index' ref='row1'>
                    {
                        this.state.row1.map((item,index)=>{
                            return(
                                <div  key={index} style={{height:30+item+'px'}} >
                                    {index}
                                </div>
                            )
                        })
                    }
                </div>
                <div className='index' ref='row2'>
                    {
                        this.state.row2.map((item,index)=>{
                            return(
                                <div  key={index} style={{height:30+item+'px'}} >
                                    {index}
                                </div>
                            )
                        })
                    }
                </div>
                <div className='index' ref='row3'>
                    {
                        this.state.row3.map((item,index)=>{
                            return(
                                <div  key={index} style={{height:30+item+'px'}} >
                                    {index}
                                </div>
                            )
                        })
                    }
                </div>
                <div className='index' ref='row4'>
                    {
                        this.state.row4.map((item,index)=>{
                            return(
                                <div  key={index} style={{height:30+item+'px'}} >
                                    {index}
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Muban;
